<template>
  <div class="page-main" v-loading="loading">
    <div class="page-container">
      <div class="page-title">
        已标注图片
      </div>
      <div class="page-body">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="(item, index) in hasTagList"
            :key="index"
            :name="item.id">
            <span slot="label">{{item.classifyName}}({{item.itemCount}})</span>
          </el-tab-pane>
        </el-tabs>
        <div class="img-list">
          <div class="img-item" v-for="(item, index) in tableData" :key="index">
            <el-image
              @click="chooseImage(item)"
              style="width: 100px; height: 100px"
              :src="item.thumbnailRelativePath"
              :fit="'cover'">
            </el-image>
          </div>
          <mine-pagination
            @numberChange="numberChange"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage">
          </mine-pagination>
        </div>
      </div>
    </div>
    <div class="btn-row">
      <el-button @click="goBack">返 回</el-button>
    </div>
    <mine-dialog :appendToBody="true" :dialogFormVisible="flag" :width="'900px'" :modalFlag="modalFlag" :title="title" :showClose="showClose" @close="close">
      <drawModal ref="drawModal" v-if="assembly === '标注图片'" slot="option" :flag="flag" @close="close" :imageInfo="curImage" @submit="submitCallback"></drawModal>
    </mine-dialog>
  </div>
</template>
<script>
import { detailMixins, modalMixins } from '../../mixins.js';
import drawModal from '../../components/draw/modal.vue';
export default {
  mixins: [detailMixins, modalMixins],
  components: {
    drawModal,
  },
  data () {
    return {
      loading: false,
      tableData: [],
      total:0,
      pageSize:10,
      currentPage: 1,
      curImage: {},
      hasTagList: [],
      activeName: '',
    };
  },
  methods: {
    async init () {
      // 获取单个任务下的标签列表
      await this.loadHasTag();
      this.loadData(true);
    },
    submitCallback () {
      this.$parent.init();
    },
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const classify = this.hasTagList.find(item => item.id === this.activeName);
      if (!classify) {
        this.tableData = [];
        this.total = 0;
        return;
      }
      const params = {
        calibrationDetailId: this.id,
        finisher: this.finisher,
        page: this.currentPage,
        pageSize: this.pageSize,
        completed: '1',
        classifyId: classify.id,
        classifyName: classify.classifyName
      };
      this.loading = true;
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationGetImgDetectCalibrate', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    async loadHasTag () {
      const params = {
        calibrationDetailsId: this.id,
      };
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationLoadImgDetectCalibrationAllLabels', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data && result.data.length ? result.data : [];
          this.hasTagList = data;
          if (this.hasTagList.length) {
            if (!this.activeName || !this.hasTagList.find(item => item.id === this.activeName)) {
              this.activeName = this.hasTagList[0].id;
            }
          }
        } else {
          this.hasTagList = [];
          this.activeName = '';
        }
      } catch (e) {
        console.error(e);
      }
    },
    handleTabClick () {
      this.loadData(true);
    },
    chooseImage (val) {
      this.curImage = { ...val };
      this.flag = true;
      this.showClose = true;
      this.title = '标注图片';
      this.assembly = '标注图片';
      this.$nextTick(() => {
        this.$refs.drawModal.show();
      });
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
    goBack () {
      window.history.go(-1);
    }
  }
}
</script>
<style lang="less" scoped>
@import url('./page.less');

</style>
